<ng-template #defaultIndicatorTemplate>
  <span class="apes-spin-dot" [class.apes-spin-dot-spin]="loading">
    <i class="apes-spin-dot-item"></i><i class="apes-spin-dot-item"></i><i class="apes-spin-dot-item"></i><i class="apes-spin-dot-item"></i>
  </span>
</ng-template>
<div *ngIf="loading">
  <div class="apes-spin"
       [class.apes-spin-spinning]="loading"
       [class.apes-spin-lg]="apesSize === 'large'"
       [class.apes-spin-sm]="apesSize === 'small'"
       [class.apes-spin-show-text]="apesTip">
    <ng-template [ngTemplateOutlet]="apesIndicator || defaultIndicatorTemplate"></ng-template>
    <div class="apes-spin-text" *ngIf="apesTip">{{ apesTip }}</div>
  </div>
</div>
<div *ngIf="!apesSimple"
     class="apes-spin-container"
     [class.apes-spin-blur]="loading">
  <ng-content></ng-content>
</div>
